<div th:fragment="login-register"
     style="position: fixed; top: -100000px;z-index: 1989101412"
     xmlns:th="http://www.thymeleaf.org">
    <div id="register">
        <form id="register-form" action="/register" method="POST">
            <div class="login-wrapper">
                <div class="input-group">
                    <div class="input-box">
                        <input class="input" name="nickname" type="text" placeholder="请输入用户名" required>
                    </div>
                </div>
                <div class="input-group">
                    <div class="input-box">
                        <input class="input" name="email" type="email" placeholder="请填写邮箱" required>
                    </div>
                </div>
                <div class="input-group">
                    <div class="input-box">
                        <input class="input" name="password" type="text" placeholder="请输入密码" required>
                    </div>
                </div>
                <button type="submit" class="btn">注册</button>
                <div class="prompt-box center"><span class="clickable login">已有账号登录</span></div>
            </div>
        </form>
    </div>
    <div id="login">
        <form id="login-form" th:action="@{/login.html}" method="POST">
            <div class="login-wrapper">
                <div class="input-group">
                    <div class="input-box">
                        <input class="input" type="email" name="username" placeholder="请填写邮箱" required>
                    </div>
                </div>
                <div class="input-group">
                    <div class="input-box">
                        <input class="input" type="password" name="password" placeholder="请输入密码">
                    </div>
                </div>
                <div class="input-group" id="check" style="display: none">
                    <div class="input-box">
                        <input class="input" type="text" placeholder="1+2=?">
                    </div>
                </div>
                <button type="submit" class="btn">登陆</button>
                <div class="prompt-box">
                    没有账号?
                    <span class="clickable register">注册</span>
                    <a th:href="@{/reset-password.html}" class="right clickable">忘记密码</a>
                </div>
            </div>
        </form>
    </div>
    <script>
        $(function () {
            $(document).on('click', '.register', function () {
                layer.closeAll();
                layer.open({
                    title: '注册',
                    resize: false,
                    move: false,
                    offset: '100px',
                    shadeClose: true,
                    type: 1,
                    content: $('#register') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            });
            $('#register-form').ajaxForm({
                dataType: 'json',
                beforeSubmit: function (arr, form, option) {
                    form.find("button:submit").attr('disable', true);
                },
                success: function (data, statusText, xhr, form) {
                    if (data.code === 200) {
                        layer.closeAll();
                        layer.msg(data.message, {icon: 1});
                    } else {
                        layer.msg(data.message, {icon: 2});
                    }
                    form.find("button:submit").attr('disable', false);
                }
            });

            $(document).on('click', '.login', function () {
                layer.closeAll();
                layer.open({
                    title: '登陆',
                    resize: false,
                    move: false,
                    offset: '100px',
                    shadeClose: true,
                    type: 1,
                    content: $('#login') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
                refreshExp();
            });
            function refreshExp() {
                var $input = $('#check input');
                var a = parseInt(10 * Math.random()) + 1;
                var b = parseInt(2 * Math.random());
                var c = parseInt(10 * Math.random()) + 1;
                var exp = a + '' + ['+', '-'][b] + '' + c;
                $input.attr('placeholder', exp + '=?')
                $input.val('');
            }

            var errorCount = 0;
            $('#login-form').ajaxForm({
                dataType: 'json',
                beforeSubmit: function (arr, form, option) {
                    if (errorCount !== 0) {
                        var $input = $('#check input');
                        var exp = $input.attr('placeholder');
                        if (eval(exp.split('=')[0]) != $input.val()) {
                            layer.msg('验证码错误', {icon: 2});
                            refreshExp();
                            return false;
                        }
                    }
                    console.log("登陆？");
                    form.find("button:submit").attr('disable', true);
                },
                success: function (data, statusText, xhr, form) {
                    if (data.code === 200) {
                        errorCount = 0;
                        $('#check').hide();
                        layer.msg(data.message, {icon: 1});
                        window.location.reload();
                    } else {
                        errorCount++;
                        refreshExp();
                        $('#check').show();
                        layer.msg(data.message, {icon: 2});
                    }
                    form.find("button:submit").attr('disable', false);
                }
            });
        });
    </script>
</div>